import React,{useContext} from 'react'
import classes from './counter.module.css'
import Mycontext from '../../Context/context'
export default function Counter(props) {

  const ctx=useContext(Mycontext)


 const addnum=()=>{
    // ctx.addItem(props.meal)
    ctx.carDatadispatch({type:'ADD',meal:props.meal})
  }
  function removenum(){
    // ctx.removeItem(props.meal)
    ctx.carDatadispatch({type:'SUB',meal:props.meal})
  }
  return (
    <div className={classes.counter}>
        {
           ( props.meal.amount&& props.meal.amount!==0)?
           (<>
           <button className={classes.btn} onClick={removenum}><i className='iconfont icon-jian'></i></button>
           <span className={classes.number}>{props.meal.amount}</span></>)
           :null
        }
        
        <button className={classes.btn} onClick={addnum}><i className='iconfont icon-tianjiatianchong'></i></button>
    </div>
  )
}
